import 'dart:io';

import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getwidget/getwidget.dart';
import 'package:images_picker/images_picker.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/route/route.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 申请开店法人信息
///
class CategoryThird extends StatefulWidget {
  const CategoryThird({Key? key}) : super(key: key);

  @override
  State<CategoryThird> createState() => _CategoryThirdState();
}

class _CategoryThirdState extends State<CategoryThird> {
  int sex = 1;

  String limitDate = '';

  List<Media> positive = [];

  List<Media> opposite = [];

  Widget get titleAction {
    return Text.rich(TextSpan(children: [
      TextSpan(text: '3/', style: StylesUtils.customTextStyle(fontSize: Sizes.default18)),
      TextSpan(text: '4', style: StylesUtils.customTextStyle(color: ColorsUtils.colorFeb)),
      TextSpan(text: '法人信息', style: StylesUtils.customTextStyle(fontSize: Sizes.default18))
    ]));
  }

  double get leftWidth {
    return Sizes.default80;
  }

  double get rowHeight {
    return Sizes.default66;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ToolsUtils.getDefaultBackgroundColor(),
      appBar: ToolsUtils.customBrnAppBar(titleAction),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              margin: const EdgeInsets.only(top: Sizes.default10),
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
              decoration: const BoxDecoration(color: Colors.white),
              child: Column(
                children: [
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('法人姓名',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(247, 247, 247, 1),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(Sizes.default10))),
                          child: TextField(
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color363, fontSize: Sizes.default16),
                            decoration: InputDecoration(
                                border: const OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                ),
                                isCollapsed: true,
                                filled: true,
                                fillColor: Colors.transparent,
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: Sizes.default10, vertical: Sizes.default10),
                                constraints: const BoxConstraints(minHeight: Sizes.default40),
                                hintText: '请输入法人真实姓名',
                                hintStyle: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default15, color: ColorsUtils.color999)),
                            keyboardType: TextInputType.text,
                            onChanged: (String content) {},
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('性别',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                            child: Container(
                          alignment: Alignment.centerLeft,
                          child: Wrap(
                            spacing: Sizes.default30,
                            children: [
                              TextButton(
                                  onPressed: () {
                                    sex = 1;
                                    setState(() {});
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        border: sex == 1
                                            ? Border.all(color: ColorsUtils.rgba(255, 110, 83, 1))
                                            : Border.all(width: 0, color: Colors.transparent),
                                        borderRadius: const BorderRadius.all(
                                            Radius.circular(Sizes.default15)),
                                        color: sex == 1
                                            ? ColorsUtils.rgba(255, 238, 238, 1)
                                            : ColorsUtils.rgba(247, 247, 247, 1)),
                                    constraints: BoxConstraints.tight(const Size(75, 30)),
                                    child: Text('男',
                                        style: StylesUtils.customTextStyle(
                                            color: sex == 1
                                                ? ColorsUtils.colorFf6
                                                : ColorsUtils.color333,
                                            fontSize: Sizes.default15)),
                                  )),
                              TextButton(
                                  onPressed: () {
                                    sex = 0;
                                    setState(() {});
                                  },
                                  child: Container(
                                    alignment: Alignment.center,
                                    decoration: BoxDecoration(
                                        border: sex == 0
                                            ? Border.all(color: ColorsUtils.rgba(255, 110, 83, 1))
                                            : Border.all(width: 0, color: Colors.transparent),
                                        borderRadius: const BorderRadius.all(
                                            Radius.circular(Sizes.default15)),
                                        color: sex == 0
                                            ? ColorsUtils.rgba(255, 238, 238, 1)
                                            : ColorsUtils.rgba(247, 247, 247, 1)),
                                    constraints: BoxConstraints.tight(const Size(75, 30)),
                                    child: Text('女',
                                        style: StylesUtils.customTextStyle(
                                            color: sex == 0
                                                ? ColorsUtils.colorFf6
                                                : ColorsUtils.color333,
                                            fontSize: Sizes.default15)),
                                  ))
                            ],
                          ),
                        )),
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('证件类型',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Container(
                          alignment: Alignment.centerLeft,
                          child: Text('居民身份证',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        )
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('证件号',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                            child: Container(
                          padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                          decoration: BoxDecoration(
                              color: ColorsUtils.rgba(247, 247, 247, 1),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(Sizes.default10))),
                          child: TextField(
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color363, fontSize: Sizes.default16),
                            decoration: InputDecoration(
                                border: const OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                ),
                                isCollapsed: true,
                                filled: true,
                                fillColor: Colors.transparent,
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: Sizes.default10, vertical: Sizes.default10),
                                constraints: const BoxConstraints(minHeight: Sizes.default40),
                                hintText: '请输入证件号',
                                hintStyle: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default15, color: ColorsUtils.color999)),
                            keyboardType: TextInputType.text,
                            onChanged: (String content) {},
                          ),
                        ))
                      ],
                    ),
                  ),
                  Container(
                    height: rowHeight,
                    padding: const EdgeInsets.symmetric(vertical: Sizes.default8),
                    child: Row(
                      children: [
                        Container(
                          width: leftWidth,
                          alignment: Alignment.centerLeft,
                          child: Text('有效期',
                              style: StylesUtils.customTextStyle(
                                  fontSize: Sizes.default15, color: ColorsUtils.color333)),
                        ),
                        Expanded(
                          child: GestureDetector(
                            child: Container(
                              padding: const EdgeInsets.symmetric(horizontal: Sizes.default10),
                              alignment: Alignment.centerLeft,
                              decoration: BoxDecoration(
                                  color: ColorsUtils.rgba(247, 247, 247, 1),
                                  borderRadius:
                                      const BorderRadius.all(Radius.circular(Sizes.default10))),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(limitDate.isEmpty ? '请选择证件有效期' : limitDate,
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default15,
                                          color: limitDate.isEmpty
                                              ? ColorsUtils.color797
                                              : ColorsUtils.color333)),
                                  BrunoTools.getAssetSizeImage(BrnAsset.iconRightArrow, 16, 16)
                                ],
                              ),
                            ),
                            onTap: () {
                              BrnDatePicker.showDatePicker(context, minDateTime: DateTime.now(),
                                  onConfirm: (DateTime dateTime, List<int> selectedIndex) {
                                // BrnToast.show('onConfirm:  $dateTime  $selectedIndex', context);
                                limitDate = DateTimeFormatter.formatDate(dateTime, 'yyyy-MM-dd');
                                setState(() {});
                              });
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: Sizes.default10),
              padding: const EdgeInsets.symmetric(horizontal: Sizes.default15, vertical: Sizes.default10),
              decoration: const BoxDecoration(color: Colors.white),
              child: Column(
                children: [
                  Container(
                    width: 345,
                    constraints: const BoxConstraints(minHeight: 205),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color: ColorsUtils.rgba(247, 247, 247, 1)),
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.only(top: Sizes.default50),
                          alignment: Alignment.center,
                          child: Wrap(
                            spacing: Sizes.default10,
                            runSpacing: Sizes.default10,
                            crossAxisAlignment: WrapCrossAlignment.center,
                            children: [
                              ...positive.map((e) => GFImageOverlay(
                                  image: FileImage(File(e.path)), width: 100, height: 100)),
                              GestureDetector(
                                onTap: () {
                                  uploadImg(1);
                                },
                                child: SizedBox(
                                    height: 46,
                                    width: 46,
                                    child: ToolsUtils.getUrlSvg(
                                        'https://cdn7.axureshop.com/demo/1525603/images/2门店信息/u579.svg')),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: Sizes.default50,
                    decoration: const BoxDecoration(color: Colors.white),
                    alignment: Alignment.center,
                    child: Text('证件正面图(国徽面)',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                  Container(
                    width: 345,
                    constraints: const BoxConstraints(minHeight: 205),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color: ColorsUtils.rgba(247, 247, 247, 1)),
                    child: Column(
                      children: [
                        Container(
                          padding: const EdgeInsets.only(top: Sizes.default50),
                          alignment: Alignment.center,
                          child: Wrap(
                            spacing: Sizes.default10,
                            runSpacing: Sizes.default10,
                            crossAxisAlignment: WrapCrossAlignment.center,
                            children: [
                              ...opposite.map((e) => GFImageOverlay(
                                  image: FileImage(File(e.path)), width: 100, height: 100)),
                              GestureDetector(
                                onTap: () {
                                  uploadImg(2);
                                },
                                child: SizedBox(
                                    height: 46,
                                    width: 46,
                                    child: ToolsUtils.getUrlSvg(
                                        'https://cdn7.axureshop.com/demo/1525603/images/2门店信息/u579.svg')),
                              )
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    height: Sizes.default50,
                    decoration: const BoxDecoration(color: Colors.white),
                    alignment: Alignment.center,
                    child: Text('证件背面图(照片面)',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: SafeArea(
        top: false,
        child: Container(
            height: Sizes.default60,
            alignment: Alignment.topCenter,
            padding: const EdgeInsets.symmetric(vertical: Sizes.default10),
            decoration: const BoxDecoration(color: Colors.white),
            child: SizedBox(
              height: Sizes.default40,
              child: FractionallySizedBox(
                widthFactor: 0.9,
                child: GFButton(
                    onPressed: () {
                      Get.toNamed(RouteGet.categoryLast);
                    },
                    text: '下一步',
                    textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                    shape: GFButtonShape.pills,
                    type: GFButtonType.solid,
                    size: GFSize.LARGE,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
              ),
            )),
      ),
    );
  }

  void uploadImg(int type) {
    ToolsUtils.openGalleryOrCamera(context, (res) {
      uploadFilePath(res, type);
    }, (resp) {
      uploadFilePath(resp, type);
    }, 1);
  }

  void uploadFilePath(List<Media> res, int type) {
    if (type == 1) {
      positive = res;
    } else {
      opposite = res;
    }
    setState(() {});
  }
}
